import Vue from 'vue'
import Vuex from 'vuex'
import { favlist, fav, shopcart ,shopcart_add} from '../utils/api'
//导入日志插件
import createLogger from 'vuex/dist/logger'
//导入持久化插件
// import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 用户信息
    // userinfo : {},

    // 收藏店铺列表
    collectList: localStorage.getItem('vuex') ? JSON.parse(localStorage.getItem('vuex')) : [],

    // 购物车列表
    shopCartList: localStorage.getItem('shopcart') ? JSON.parse(localStorage.getItem('shopcart')) : [],

    // 搜索列表
    searchList: localStorage.getItem('searchlist') ? JSON.parse(localStorage.getItem('searchlist')) : [],
  },



  // 计算方法
  getters: {

    // 总数
    sum(state){
      var sum = 0;
       state.shopCartList.forEach(item => {
        sum += item.count
       });
       return sum
    },

    // 总价
    totalPrice(state){
      var price = 0;
      state.shopCartList.forEach(item => {
        price += item.count * item.min_price
       });
       return price.toFixed(1)
    }
    
  },
  // 同步方法
  mutations: {
     // 用户信息
    // userinfo(state,payload){
    //   state.userinfo = payload
    //   console.log(state.userinfo);
    //   console.log(payload);
    // },

    // 收藏店铺
    collection(state,payload){
      state.collectList.push(payload)
      // 手动存储vuex数据到本地存储
      localStorage.setItem("vuex", JSON.stringify(state.collectList))
    },
    // 取消收藏
    cancel(state,payload){
      var id = state.collectList.findIndex((item)=>{
        return item.mtWmPoiId == payload.mtWmPoiId
      })
      if( id != -1){
        state.collectList.splice(id,1)
      }
      // 手动存储vuex数据到本地存储
      localStorage.setItem("vuex", JSON.stringify(state.collectList))
    },
    //  收藏列表
    favlist(state,payload){
      state.collectList = payload
      localStorage.setItem("vuex", JSON.stringify(state.collectList))
    },

    // 购物车列表
    shopcart(state,payload){
      state.shopCartList = payload
      localStorage.setItem("shopcart", JSON.stringify(state.shopCartList))
    },
    // 清空购物车列表
    clear_cart(state){
      state.shopCartList = [],
      // 手动存储vuex数据到本地存储
      localStorage.setItem("shopcart", JSON.stringify(state.shopCartList))
    },
    // 购物车数量加一
    cart_add(state,payload){
      var num = state.shopCartList.find((item)=>{
        return item.id == payload.id
      })
      if( num ){ // 如果该商品已经在购物车中，数量加1
        num.count ++ 
      }else{ // 商品不存在，就要加入
        // 因为要增加属性 商品数量为1，所以为避免修改传入的参数，进行深拷贝后，增加属性，将深拷贝的商品传入商品列表
        var good = JSON.parse(JSON.stringify(payload))
        good.count = 1
        state.shopCartList.push(good)
      }
      // 手动存储vuex数据到本地存储
      localStorage.setItem("shopcart", JSON.stringify(state.shopCartList))
    },
    // 购物车数量减一
    cart_sub(state,payload){
      var id = state.shopCartList.findIndex((item)=>{
        return item.id == payload.id
      })
      if( id != -1 ){ // 如果该商品已经在购物车中，数量加1
        if( state.shopCartList[id].count > 1){
          state.shopCartList[id].count --
        }else if(state.shopCartList[id].count == 1){
          state.shopCartList.splice(id,1)
        }
      }
      // 手动存储vuex数据到本地存储
      localStorage.setItem("shopcart", JSON.stringify(state.shopCartList))
    },

    // 添加搜索记录
    search_add(state,payload){
      // 增加数据(将于输入的关键字添加到数组中)
      state.searchList.unshift(payload)
      // 将数组使用 ES6去重，后回变成对象
      let newArr = new Set(state.searchList) 
      // 手动存储vuex数据到本地存储
      // 将对象转化为数组，再将数组转化为字符串 给本地存储赋值,
      localStorage.setItem('searchlist',JSON.stringify(Array.from(newArr)))
    },
    // 删除搜索记录
    search_sub(state){
      state.searchList = [],
      // 手动存储vuex数据到本地存储
      localStorage.setItem("searchlist", JSON.stringify(state.searchList))
    }
  },
  // 异步方法
  actions: {
    //  收藏列表
    request_favlist( { commit } ){
      var userid = JSON.parse(localStorage.getItem('userinfo')).id
      console.log(userid);
        favlist({userid}).then((res)=>{
          console.log(res);
          if( res.data.code == 200 ){
            commit('favlist',res.data.list)
          }
        })
    },
    //  收藏店铺
    requeset_fav( state, payload ){
      var userid = JSON.parse(localStorage.getItem('userinfo')).id
      fav({userid,shopid:payload.mtWmPoiId}).then((res)=>{
        console.log(res);
        if(res.data.code==200){
            state.commit('collection',payload)
        }
      }).catch((e)=>{})
    },
    //  购物车列表
    request_shopcart( { commit } ){
      var userid = JSON.parse(localStorage.getItem('userinfo')).id
      shopcart({userid}).then((res)=>{
        console.log(res);
          if( res.data.code == 200 ){
            commit('shopcart',res.data.list)
          }
        }).catch((e)=>{})
    },
    // 购物车加一
    request_shopcartAdd( { commit }, payload ){
      var userid = JSON.parse(localStorage.getItem('userinfo')).id
      shopcart_add({userid,goodid:payload.id}).then((res)=>{
        console.log(userid,payload.id);
        console.log(res);
        if(res.data.code == 200){
          commit('cart_add',payload)
        }
      }).catch((e)=>{})
    },

  },
  modules: {
  },
  //配合其他插件 管理vuex中state内部的数据
  // plugins:[ createLogger(), createPersistedState()]
  plugins:[ createLogger(),]
})
